<template>
  <view class="panel-box">
    <view class="input-amount-wrap">
      <view>
        <view class="font-18">充值金额</view>
        <view class="input-wrap">
          <text class="font-bold">￥</text>
          <input type="digit" maxlength="9" placeholder="请输入充值金额" v-model="money" />
        </view>
      </view>
    </view>
    <view class="btn-wrap">
      <button @click="submitRecharge" :class="{ loading: isLoading }">
        提交
        <view v-if="isLoading" class="loading-icon"></view>
      </button>
    </view>
  </view>
</template>

<script>
  import { driverRecharge, closeRecharge } from '@/api/system/wallet.js';
  import { toast } from '@/utils/common';
  export default {
    data() {
      return {
        money: '',
        payParam: null,
        types: '',
        lineCharge: '',
        isLoading: false
      };
    },
    mounted() { },
    onLoad(options) {
      if (!!options) {
        if (!!options.types) {
          this.types = options.types;
        }
        if (!!options.lineCharge) {
          this.lineCharge = options.lineCharge;
        }
      }
    },
    methods: {
      async submitRecharge() {
        if (this.isLoading) return;
        if (
          this.money == 0 ||
          !(/^\d+(\.\d{1,2})?$/.test(this.money) && this.money <= 5000)
        ) {
          toast('充值金额的输入范围为0.01~5000.00');
          return;
        }
        try {
          this.isLoading = true;
          const cost = Math.round(this.money * 100);
          const res = await driverRecharge({ cost });
          if (res.code === 0) {
            this.payParam = res?.data || {};
            this.requestPayment();
          } else {
            toast(res.msg || '接口查询失败');
          }
        } finally {
          this.isLoading = false;
        }
      },
      requestPayment() {
        let _ = this;
        wx.requestPayment({
          provider: 'wxpay',
          timeStamp: this.payParam.timeStamp,
          package: `prepay_id=${this.payParam.prepayId}`,
          paySign: this.payParam.paySign,
          appId: 'wx509f810f5fb82353',
          signType: 'RSA',
          nonceStr: this.payParam.nonceStr,
          success: () => {
            toast('支付成功');
            this.isLoading = false;

            if (_.lineCharge == 'code') {
              _.$tab.reLaunch('/pages/index?chargeLine=code');
              return;
            }
            if (_.types == 'code') {
              if (uni.getStorageSync('isSetSjxx') == 'net') {
                this.$tab.reLaunch('/pages/receivingNet?codes=czback');
              } else if (uni.getStorageSync('isSetSjxx') == 'bj') {
                this.$tab.reLaunch('/pages/receivingBJ?codes=czback');
              } else if (uni.getStorageSync('isSetSjxx') == 'jy') {
                this.$tab.reLaunch('/pages/receivingJY?codes=true');
              } else if (uni.getStorageSync('isSetSjxx') == 'jl') {
                this.$tab.reLaunch('/pages/receiving?codes=true');
              }
            } else {
              this.$tab.reLaunch('/packageB/pages/mine/my-wallet/myWallet');
            }
          },
          fail: (res) => {
            if (res.errMsg == 'requestPayment:fail cancel') {
              this.closeRecharge();
            } else {
              this.isLoading = false;
              toast('支付失败');
            }
          }
        });
      },
      async closeRecharge() {
        try {
          const res = await closeRecharge({
            prepayId: this.payParam.prepayId
          });
          if (res.code === 0) {
            toast('取消支付');
          } else {
            toast(res.msg || '接口响应失败');
          }
        } finally {
          this.isLoading = false;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .panel-box {
    height: 100vh;
    padding: 35.56rpx 17.78rpx;

    .input-amount-wrap {
      width: 100%;
      height: 266.67rpx;
      border-radius: 14.22rpx;
      background: #ffffff;
      display: flex;
      align-items: center;

      >view {
        color: #000000;
        padding: 35.56rpx;
      }

      .input-wrap {
        position: relative;

        input {
          margin-top: 40rpx;
          font-size: 70rpx;
          padding-left: 70rpx;
          height: 120rpx;
          line-height: 120rpx;
        }

        text {
          position: absolute;
          left: 0;
          font-size: 50rpx;
          bottom: 16rpx;
        }
      }
    }

    .btn-wrap {
      margin-top: 100rpx;
    }
  }

  .loading {
    position: relative;
  }

  .loading-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 29%;
    left: 36%;
    transform: translate(-50%, -50%);
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>